<template>
    <el-form
        ref="formRef"
        label-width="98px"
        :model="formData"
        :rules="formRules"
        :disabled="pageType == 'look'"
        style="width: 45%">
        <el-form-item label="选择公众号" prop="official_account_id" label-width="98px">
            <OfficialAccounts
                :public-data="{ id: formData.official_account_id, pageType }"
                @submit="v => v && (formData.official_account_id = v)" />
        </el-form-item>
        <el-form-item label="用户身份授权" prop="is_auth" class="isauth" label-width="100px">
            <el-switch v-model="formData.is_auth" :active-value="2" :inactive-value="1" />
            <el-popover trigger="hover" placement="right" :width="834" popper-class="tooltop_add">
                <template #default>
                    <div class="alert">
                        <div style="font-size: 16px; font-weight: 500; color: #33302d; line-height: 16px">
                            用户身份授权
                        </div>
                        <div style="margin-top: 16px">
                            <div style="display: flex; align-items: center">
                                <div style="border: 2px solid #ff6b00; width: 0; height: 14px"></div>
                                <div
                                    style="
                                        font-size: 14px;
                                        font-weight: 500;
                                        color: #33302d;
                                        line-height: 14px;
                                        margin-left: 5px;
                                    ">
                                    开启用户授权后，当查看门店活动前，弹窗授权用户信息，用于匹配系统客户身份，方便员工查看客户完整画像信息。
                                </div>
                            </div>
                            <div style="display: flex; align-items: center">
                                <div
                                    v-for="items in onealertData"
                                    :key="items"
                                    style="
                                        display: flex;
                                        flex-direction: column;
                                        align-items: center;
                                        width: 25%;
                                        padding: 0 10px;
                                    ">
                                    <img :src="items.urc" style="width: 126px; height: 256px" />
                                    <div style="display: flex">
                                        <span
                                            style="
                                                font-size: 12px;
                                                font-weight: 500;
                                                color: #ff6b00;
                                                line-height: 12px;
                                                padding-right: 6px;
                                            "
                                            >{{ items.code }}</span
                                        ><span>{{ items.title }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div style="margin-top: 16px">
                            <div style="display: flex; align-items: center">
                                <div style="border: 2px solid #ff6b00; width: 0; height: 14px"></div>
                                <div
                                    style="
                                        font-size: 14px;
                                        font-weight: 500;
                                        color: #33302d;
                                        line-height: 14px;
                                        margin-left: 5px;
                                    ">
                                    关闭用户授权后，匿名查看门店活动，无法识别用户在系统中客户的其他画像信息。
                                </div>
                            </div>
                            <div style="display: flex; align-items: center">
                                <div
                                    v-for="items in twoalertData"
                                    :key="items"
                                    style="display: flex; flex-direction: column; align-items: center; padding: 0 10px">
                                    <img :src="items.urc" style="width: 126px; height: 256px" />
                                    <div style="display: flex; align-items: center">
                                        <span
                                            style="
                                                font-size: 12px;
                                                font-weight: 500;
                                                color: #ff6b00;
                                                line-height: 12px;
                                                padding-right: 6px;
                                            "
                                            >{{ items.code }}</span
                                        ><span>{{ items.title }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </template>
                <template #reference>
                    <img class="help_icon" src="@/assets/image/customer/help_icon.png" alt="" />
                </template>
            </el-popover>
        </el-form-item>
        <el-form-item label="活动标题" prop="activity_name">
            <el-input
                v-model="formData.activity_name"
                placeholder="请输入标题名称"
                maxlength="15"
                show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="活动分组" prop="group_id">
            <el-cascader
                ref="cascaderRef"
                v-model="formData.group_id"
                style="width: 100%"
                :props="defaultProps"
                :options="groupOptions"
                @change="orgChange" />
        </el-form-item>
        <el-form-item label="活动有效期">
            <el-radio-group v-model="formData.period_type">
                <el-radio :label="1">永久</el-radio>
                <el-radio :label="2">固定期限</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item v-if="formData.period_type == 2" prop="activity_time">
            <el-date-picker
                v-model="formData.activity_time"
                type="datetimerange"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
                range-separator="—"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                :default-time="defaultTime()"
                :disabled-date="disabledDate">
            </el-date-picker>
        </el-form-item>
    </el-form>
</template>

<script setup lang="ts">
import OfficialAccounts from '@/components/OfficialAccounts.vue';
import { ref, defineExpose, onMounted, defineProps } from 'vue';
import { getGroupList } from '@/api/concreation';
import { timeValidator } from '@/utils/smartMarketing';
import { defaultTime } from '@/utils/utils';
import one from '@/assets/smartMarketing/customer_one.png';
import two from '@/assets/smartMarketing/customer_two.png';
import three from '@/assets/smartMarketing/customer_three.png';
import four from '@/assets/smartMarketing/customer_four.png';

const onealertData = ref([
    { urc: one, title: '获取用户地理位置信息，用于获取附近活动门店，拒绝后，进入门店列表页面', code: '①' },
    { urc: two, title: '获取当前定位的活动门店列表，或者手动定位城市的活动门店', code: '②' },
    { urc: three, title: '查看门店活动之前，获取用户授权信息，拒绝后，也可查看门店活动信息', code: '③' },
    { urc: four, title: '扫码添加企微联系人，领取活动福利', code: '④' }
]);
const twoalertData = ref([
    { urc: one, title: '获取用户地理位置信息，用于获取附近活动门店。拒绝后，进入门店列表页面', code: '①' },
    { urc: two, title: '获取当前定位的活动门店列表，或者手动定位城市的活动门店', code: '②' },
    { urc: four, title: '用户直接匿名查看门店活动信息，扫码添加企微联系人，领取活动福利。', code: '③' }
]);
const formRef: any = ref(null);
const cascaderRef: any = ref(null); // 选择分组ref
interface Props {
    pageType: any;
    group_id: any;
}
const props = withDefaults(defineProps<Props>(), {
    pageType: '',
    group_id: 0
});
const formData = ref({
    official_account_id: '', //公众号授权的ID
    activity_name: '', //活动名称
    group_id: props.group_id == 'all' ? 0 : props.group_id, //分组ID //分组id
    is_auth: 1, //1关 2 开
    period_type: 1, //活动有效期类型: 1-永久 2-固定期限
    activity_time: []
});
const formRules = {
    official_account_id: [{ required: true, message: '请选择公众号', trigger: 'change' }],
    activity_name: [{ required: true, message: '请输入活动标题', trigger: 'blur' }],
    group_id: [{ required: true, message: '请选择活动分组', trigger: 'change' }],
    period_type: [{ required: true, message: '请选择活动有效期类型', trigger: 'change' }],
    activity_time: [
        { required: true, message: '请选择时间', trigger: 'change' },
        { validator: timeValidator, trigger: 'blur' }
    ]
};
const disabledDate = (time: string) => {
    return time.getTime() < Date.now() - 8.64e7;
};

const groupOptions = ref([]);
const defaultProps = {
    checkStrictly: true, // 是否严格的遵守父子节点不互相关联
    emitPath: false,
    multiple: false,
    label: 'name',
    value: 'id'
};
getGroupList({ type: 15, name: '' }).then((res: any) => {
    groupOptions.value = res.data;
});
// 选择完地区后立即关闭
const orgChange = () => {
    cascaderRef.value.togglePopperVisible();
};
defineExpose({
    formData,
    formRef
});
</script>

<style lang="scss" scoped>
.isauth {
    :deep .el-form-item__content {
        display: flex;
        align-items: center;
    }

    .help_icon {
        margin-left: 12px;
        width: 16px;
    }

    .second_icon {
        margin-right: 12px;
        width: 16px;
    }
}

.official_box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 300px;
    height: 150px;
    border: 1px solid #eaeaea;
    border-radius: 1px;
    cursor: pointer;
    color: #ccc;
    font-size: 45px;

    .official_text {
        font-size: 14px;
        color: #000000d1;
    }
}

.official_box2 {
    display: flex;
    cursor: pointer;

    &:hover {
        background: #f5f5f5;
    }

    .left {
        margin-right: 10px;

        .el-icon {
            font-size: 60px;
        }
    }

    .right {
        color: #ff5b11;
        text-align-last: left;

        .right_h3 {
            font-weight: 700;
        }
    }
}
</style>
